<template>
	<view class="contacts">
		<view class="contacts-container">
			<div class="user-list">
				<div class="user-list-item" v-for="(friend, acceptUserId) in friends" :key="acceptUserId"
					@click="enterChat(friend)">
					<div class="user-item-avatar">
						<image :src="friend.acceptUserIcon"></image>
					</div>
					<div class="user-item-info">
						<span class="user-item-info__name">{{friend.acceptUserName}}</span>
						<span :class="friend.num>0?'msg-num':''">{{friend.num>0?friend.num:''}}</span>
					</div>
				</div>
			</div>
		</view>
	</view>
</template>

<script>
	var isOnMessage = false;
	var _self;
	export default {
		data() {
			return {
				friends: []
			}
		},
		onLoad() {
			_self = this
			_self.getFriends();
			if (!isOnMessage) {
				isOnMessage = true;
				_self.$socket.state.socketTask.onMessage(function(res) {
					console.log('收到服务器内容：' + res.data);
					uni.showTabBarRedDot({
						index: 2
					})
					var msg = JSON.parse(res.data);
					var friends = _self.friends;
					var flag = false;
					var i = 0;
					for (let index in friends) {
						if (friends[index].acceptUserId == msg.acceptUserInfo.sendUserId) {
							flag = true;
							i = index;
						}
						if (flag) {
							break;
						}
					}
					if (flag) {
						_self.friends[i].num = _self.friends[i].num + 1;
					} else {
						_self.friends.push({
							id: msg.relationId,
							acceptUserId: msg.userInfo.userId,
							acceptUserName: msg.userInfo.name,
							acceptUserIcon: msg.userInfo.icon,
							sendUserId: _self.$store.state.user.userId,
							sendUserName: _self.$store.state.user.name,
							sendUserIcon: _self.$store.state.user.icon,
							num: 1
						})
					}
				});
			}
		},
		onShow() {
			uni.hideTabBarRedDot({
				index: 2
			})
		},
		onPullDownRefresh() {
			console.log('refresh');
			_self.getFriends()
			uni.stopPullDownRefresh();
			uni.hideTabBarRedDot({
				index: 2
			})
		},
		methods: {
			getFriends() {
				_self.friends = [];
				_self.xhttp.request({
					url: "/chat/user/list", //仅为示例，并非真实接口地址。
					method: "GET",
					data: {
						userId: _self.$store.state.user.userId
					},
					header: {
						'Content-Type': 'application/json'
					}
				}).then(res => {
					if (res.data.code == 200) {
						var data = res.data.data
						for (let index in data) {
							data[index].num = 0
							_self.friends.push(data[index])
						}
					}
					uni.hideLoading();
				}).catch(err => {
					uni.hideLoading();
				})
			},
			enterChat(user) {
				user.num = 0;
				uni.navigateTo({
					url: 'privateChat?user=' + JSON.stringify(user)
				})
			},
		}
	}
</script>

<style>
	.contacts {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.contacts .contacts-container {
		width: 100%;
		overflow: auto;
	}

	.contacts .user-list-item {
		height: 132rpx;
		padding-left: 32rpx;
		display: flex;
		align-items: center;
	}

	.contacts .contacts-title {
		height: 80rpx;
		line-height: 100rpx;
		font-size: 30rpx;
		color: #666666;
		background: #F3F4F7;
		text-indent: 44rpx;
	}

	.contacts .user-list {
		flex-grow: 1;
		background: #ffffff;
		display: flex;
		flex-direction: column;
	}

	.contacts .user-item-avatar {
		width: 96rpx;
		height: 96rpx;
		margin-right: 32rpx;
		overflow: hidden;
		position: relative;
	}

	.contacts .user-item-avatar image {
		width: 100%;
		height: 100%;
		display: block;
	}

	.contacts .user-item-info {
		height: 130rpx;
		padding-right: 32rpx;
		line-height: 88rpx;
		flex-grow: 1;
		border-bottom: 1px solid #EFEFEF;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.contacts .user-item-info__name {
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-style: normal;
		font-weight: bold;
		color: #262628;
	}

	.contacts .user-item-info__tips {
		height: 44rpx;
		width: 64rpx;
		border-radius: 24rpx;
		font-size: 26rpx;
		line-height: 44rpx;
		background: #D02129;
		color: #ffffff;
		font-family: Cabin;
		text-align: center;
	}

	.contacts .online-dot {
		position: absolute;
		width: 32rpx !important;
		height: 32rpx !important;
		right: 0;
		bottom: 0;
	}

	.contacts .online-tips {
		font-size: 28rpx;
		color: #666666;
	}

	.msg-num {
		background-color: red;
		color: #FFFFFF;
		display: block;
		border-radius: 50%;
		width: 40rpx;
		height: 40rpx;
		text-align: center;
		line-height: 40rpx;
	}
</style>
